<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<link href="bootstrap.min.css" rel="stylesheet">
	   <script src="jquery-3.3.1.min.js"></script>
	   <script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#spring").click(function(){
$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "spring.css"
})
.appendTo("head");
});
});

$(function(){
$("#summer").click(function(){
$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "summer.css"
})
.appendTo("head");
});
});

$(function(){
$("#autumn").click(function(){
$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "autumn.css"
})
.appendTo("head");
});
});

$(function(){
$("#winter").click(function(){
$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "winter.css"
})
.appendTo("head");
});
});
</script>
<style>
.row{
border:1px solid black;
height:100px;
padding:0px;
background-color:black;
}
.theme{
border:1px solid blue;
height:900px;
padding:0px;
}
.container-fluid{
padding:0px;
}
.universe{
height:200px;
overflow:scroll;
}
p{
color:white;
}
</style>   
</head>
<body>
<div class="container-fluid">

  <div class="row">
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#" id="spring" rel="spring.css">spring</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#" id="summer" rel="summer.css">summer<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" id="autumn" rel="autumn.css">autumn</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" id="winter" rel="winter.css">winter</a>
      </li>
    </ul>

  </div>
    </nav>
  </div>
  
  
<div class="theme">
 
 <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="universe">
  <h4 id="fat">欢迎</h4>
  <p>广义的宇宙定义是万物的总称，是时间和空间的统一。狭义的宇宙定义是地球大气层以外的空间和物质。
  “宇宙航行”的“宇宙”定义就是狭义的“宇宙”定义，宇宙航行意思就是在大气层以外的空间航行。

</p>
  <h4 id="mdo">探索</h4>
  <p>古代对宇宙的定义，有西汉的《淮南子》：“往古来今谓之宙，四方上下谓之宇”。</p>
  <p>通过宇宙微波背景辐射的观测发现我们的宇宙已经膨胀了138.2亿年，最新的研究认为宇宙的直径可达到920亿光年，甚至更大。</p>
  <p>类所观察到的部分宇宙的物件大约是由4.9%的普通物质（构成恒星、行星、气体和尘埃的物质）或“重子”，26.8%的暗物质和68.3%的暗能量构成。重子物质构成星系际的“蛛网”。</p>
  <p>宇宙大爆炸是描述宇宙诞生初始条件及其后续演化的宇宙学模型，这一模型得到了当今科学研究和观测最广泛且最精确的支持。宇宙学家通常所指的大爆炸观点为：宇宙是在过去有限的时间之前，由一个密度极大且温度极高的太初状态演变而来的，并经过不断的膨胀到达今天的状态。</p>
</div>
 
</div>
  
</div>



</body>
	
</html>



